@diceSize : 60px;
#dice {
  position: absolute;
  width: @diceSize;
  height: @diceSize;
  perspective: 1800px;
  top: 284px;
  left: 284px;
}
#spinner div {
  position: absolute;
  width: @diceSize;
  height: @diceSize;
  border: 2px solid #ccc;
  border-radius : 10px;
  background: rgba(255,255,255,0.8);
  box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
  text-align: center;
  line-height: @diceSize;
  font-size: 100px;
  background-size: contain !important;
}
.cubespinner{

}
#spinner .face1 { -webkit-transform:  rotateX(90deg) translateZ(@diceSize/2);; background : url('../image/1.png') center     }
#spinner .face2 { -webkit-transform: translateZ(@diceSize/2);   background : url('../image/2.png') center;              }
#spinner .face3 { -webkit-transform:  rotateY(90deg) translateZ(@diceSize/2); background : url('../image/3.png') center;   }
#spinner .face4 { -webkit-transform:  rotateY(180deg) translateZ(@diceSize/2); background : url('../image/4.png') center; }
#spinner .face5 { -webkit-transform: rotateY(-90deg) translateZ(@diceSize/2); background : url('../image/5.png') center; }
#spinner .face6 { -webkit-transform:  rotateX(-90deg) rotate(180deg) translateZ(@diceSize/2); background : url('../image/6.png') center;      }
#spinner {

  -webkit-transform-origin: @diceSize/2 @diceSize/2 0;
  -webkit-transition: -webkit-transform 1.5s linear;
  -webkit-transform-style: preserve-3d;
  transition: transform 1.5s linear;
  transform-style: preserve-3d;


}